iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 8
0
Modern Web

學會Elm寫前端系列 第 8

08 如何讓Elm和server說上話?

  • 分享至 

  • xImage
  •  

和server 說說話

我們直接使用官方的 example
來說明好了。這是一個很簡單的app, 你按一個鈕後,會隨機產生一個random的貓咪圖。

array vs list

在開始之前呢?我先回答我自己先前的問題,Elm裡面有沒有 array 答案是 有的
。 你可以用
Array.fromList 。把list 變成array就可以做一些list做不到的事情,譬如:

> import Array exposing (..)

> get 0 (fromList [1,2,3])
Just 1 : Maybe.Maybe number

> set 1 "hello" (fromList ["world", "wide", "web"])
Array.fromList ["world","hello","web"] : Array.Array String

setget 都不是原本可以list可以做的。

Http 套件

如果你自己有elm-repl的話,可以先在命令列下: elm-package install elm-lang/http
就會在global裡安裝 http 的套件。

> import Http

> Http.getString "http://google.com"
Request { method = "GET", headers = [], url = "http://google.com", body = EmptyBody, expect = { responseType = "text", responseToResult = <function> }, timeout = Nothing, withCredentials = False }
    : Http.Request String

如果你仔細看http 套件的doc:

type alias Request a = 
    Request a

getString : String -> Request String

getString 會回傳一個 Request String 的 type。我們這裡的 String 就是 {method = "GET"...} 這一串。

還有一個get

getString : String -> Request String
Http.getString url

get : String -> Decoder a -> Request a
Http.get url someDecoder 

看得出來哪裡不一樣嗎? get 通常是用來get json,之後,再用一個decoder把json變成你要的; getSting
單純就得到你要的string而已。

再回到這個貓咪的例子:

完整版的code請看官方的http 的例子


type Msg
  = MorePlease
  | NewGif (Result Http.Error String)

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    MorePlease ->
      (model, getRandomGif model.topic)

    NewGif (Ok newUrl) ->
      (Model model.topic newUrl, Cmd.none)

    NewGif (Err _) ->
      (model, Cmd.none)

-- other code here

getRandomGif : String -> Cmd Msg
getRandomGif topic =
  let
    url =
      "https://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=" ++ topic
  in
    Http.send NewGif (Http.get url decodeGifUrl)


decodeGifUrl : Decode.Decoder String
decodeGifUrl =
  Decode.at ["data", "image_url"] Decode.string

現在來說明這個code,按了鈕之後,會產生 MSG ,這時候 Elm runtime 就會通知 update update 解析
這個 MorePlease 的message,裡有個 getRandomGif 我們之前說過 Http.get ,
它會用我們自己編的 decorder,如果成功就會是 (Ok, url) ,失敗就是 (Err, something) 。我們透過 Http.send , 把這個結果用 Cmd msg 傳給 Elm runtime
Result type :

type Result error value = Ok value | Err error

不論是Ok 或Err 都會帶有一個值,後面的就是我們要的。我們透過Elm 內建的 Http 就可以和server
溝通了。可以去官方看Http的doc,裡頭會把send 和get 的type說明,還有一個是
Request a 這個type。就可以讓人瞭解了。


上一篇
07 如何在Elm裡讀Json?
下一篇
09 elm 和javascript如果合作?
系列文
學會Elm寫前端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言